<template>
  <div class="energy-min-container" >
    <div class="energy-min-header">
      <div class="energy-min-header-item" style="margin-left: 50px;">
        <span class="item-title">总费用(万元)</span>
        <span class="item-value">0</span>
      </div>
      <div class="energy-min-header-item">
        <span class="item-title">费用UC(RMB/Kwh)</span>
        <span class="item-value">0</span>
      </div>
      <div class="energy-min-header-item">
        <span class="item-title">标煤UC(Kgce/Kwh)</span>
        <span class="item-value">0</span>
      </div>
      <div class="energy-min-header-item">
        <span class="item-title">节能项目进行中(项)</span>
        <span class="item-value">0</span>
      </div>
      <div class="energy-min-header-item">
        <span class="item-title">节能项目累计完成(项)</span>
        <span class="item-value">0</span>
      </div>
      <div class="energy-min-header-item" style="border: none;">
        <span class="item-title">单价波动影响费用(万元)</span>
        <span class="item-value">0</span>
      </div>
    </div>
    <div class="energy-min-main">
      <div class="energy-min-main-left">
        <div class="energy-min-main-left-item"><EnergyLeftLineBarEchartCmp /></div>
        <div class="energy-min-main-left-item"><EnergyLeftBubbleEchartCmp /></div>
        <div class="energy-min-main-left-item"><EnergyLeftDoubleZhuEchartCmp /></div>
      </div>

      <div class="energy-min-main-middle">
        <div class="energy-min-main-middle-line-cmp">
          <!-- <EnergyMiddleLineBarCmp style="height: 280px;" />
          <EnergyMiddleZhuBarCmp />
          <div class="energy-min-main-middle-info">
            <div>
              <span :style="{width: '10px', height: '10px', display: 'inline-block', 'background-color': '#007EF0', 'border-radius': '50%', 'margin-right': '8px'}"></span>
              <span>年初A目标</span>
            </div>
            <div>
              <span :style="{width: '10px', height: '10px', display: 'inline-block', 'background-color': '#007EF0', 'border-radius': '50%', 'margin-right': '8px'}"></span>
              <span>年初B+目标</span>
            </div>
            <div>
              <span :style="{width: '10px', height: '10px', display: 'inline-block', 'background-color': '#FF0000', 'border-radius': '50%', 'margin-right': '8px'}"></span>
              <span>滚动A目标</span>
            </div>
            <div>
              <span :style="{width: '10px', height: '10px', display: 'inline-block', 'background-color': '#FF6200', 'border-radius': '50%', 'margin-right': '8px'}"></span>
              <span>滚动B+目标</span>
            </div>
            <div>
              <span :style="{width: '10px', height: '10px', display: 'inline-block', 'background-color': '#00FBFF', 'border-radius': '50%', 'margin-right': '8px'}"></span>
              <span>达成Kgce/Kwh</span>
            </div>
            <div>
              <span :style="{width: '10px', height: '10px', display: 'inline-block', 'background-color': '#0091FF', 'border-radius': '50%', 'margin-right': '8px'}"></span>
              <span>21Q4</span>
            </div>
            <div>
              <span :style="{width: '10px', height: '10px', display: 'inline-block', 'background-color': '#0038FF', 'border-radius': '50%', 'margin-right': '8px'}"></span>
              <span>22年初</span>
            </div>
            <div>
              <span :style="{width: '10px', height: '10px', display: 'inline-block', 'background-color': '#6800FF', 'border-radius': '50%', 'margin-right': '8px'}"></span>
              <span>22滚动</span>
            </div>
            <div>
              <span :style="{width: '10px', height: '10px', display: 'inline-block', 'background-color': '#DB00FF', 'border-radius': '50%', 'margin-right': '8px'}"></span>
              <span>22YTD</span>
            </div>
            <div>
              <span :style="{width: '10px', height: '10px', display: 'inline-block', 'background-color': '#00DBFF', 'margin-right': '8px'}"></span>
              <span>年初排产GWH</span>
            </div>
            <div>
              <span :style="{width: '10px', height: '10px', display: 'inline-block', 'background-color': '#FFB300', 'margin-right': '8px'}"></span>
              <span>实际产出GWH</span>
            </div>
          </div> -->
        </div>
        
      </div>

      <div class="energy-min-main-right">
        <div class="energy-min-main-right-item"><EnergyRightLineBarEchartCmp /></div>
        <div class="energy-min-main-right-item"><EnergyRightBubbleEchartCmp /></div>
        <div class="energy-min-main-right-item"><EnergyRightDoubleZhuEchartCmp /></div>
      </div>
    </div>
  </div>
</template>

<script>
// import EnergyLineBarCmp from '../components/energy/EnergyLineBarCmp.vue';
// import EnergyLineBarMiddleCmp from '../components/energy/EnergyLineBarMiddleCmp.vue';
// import EnergyMiddleLineBarCmp from '../components/energy/EnergyMiddleLineBarCmp.vue';
// import EnergyMiddleZhuBarCmp from '../components/energy/EnergyMiddleZhuBarCmp.vue';

import EnergyLeftLineBarEchartCmp from '../components/energy/EnergyLeftLineBarEchartCmp.vue';
import EnergyLeftBubbleEchartCmp from '../components/energy/EnergyLeftBubbleEchartCmp.vue';
import EnergyLeftDoubleZhuEchartCmp from '../components/energy/EnergyLeftDoubleZhuEchartCmp.vue';

import EnergyRightLineBarEchartCmp from '../components/energy/EnergyRightLineBarEchartCmp.vue';
import EnergyRightBubbleEchartCmp from '../components/energy/EnergyRightBubbleEchartCmp.vue';
import EnergyRightDoubleZhuEchartCmp from '../components/energy/EnergyRightDoubleZhuEchartCmp.vue';
export default {
    name: 'energyMin',
  data() {
    return {
    };
  },
  components: { 
    // EnergyLineBarCmp,
    // EnergyLineBarMiddleCmp,
    // EnergyMiddleLineBarCmp,
    // EnergyMiddleZhuBarCmp,

    EnergyLeftLineBarEchartCmp,
    EnergyLeftBubbleEchartCmp,
    EnergyLeftDoubleZhuEchartCmp,

    EnergyRightLineBarEchartCmp,
    EnergyRightBubbleEchartCmp,
    EnergyRightDoubleZhuEchartCmp,
  },
  mounted() {
    
  },
  methods: {
    
  },
};
</script>

<style lang="scss" scoped>
   .energy-min-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .energy-min-header {
      height: 64px;
      background: rgba(15,45,75,0.2);
      border: 1px solid rgba(255,255,255,0.08);
      display: flex;
      justify-content: center;
      align-items: center;
      .energy-min-header-item {
        font-size: .2rem;
        font-family: HarmonyOS_Sans_SC;
        color: #FFFFFF;
        margin-right: 50px;
        padding: 10px 0px;
        padding-right: 60px;
        display: flex;
        align-items: center;
        border-right: 1px solid;
        border-image: linear-gradient(180deg, rgba(200, 200, 200, 0), rgba(0, 219, 255, 1), rgba(151, 151, 151, 0)) 1 1;

        .item-title {
          margin-right: .2rem;
        }

        .item-value {
          font-size: .4rem;
          font-family: YouSheBiaoTiHei;
          color: #00DBFF;
          font-style: italic;
        }
      }
    }

    .energy-min-main {
      flex: 1;
      display: flex;
      flex-direction: row;

      .energy-min-main-left {
        width: 400px;
        height: 100%;
        display: flex;
        flex-direction: column;

        .energy-min-main-left-item {
          margin-top: 15px;
          flex: 1;
          background: rgba(15,47,92,0.2);
        }
      }

      .energy-min-main-middle {
        flex: 1;
        margin-top: 15px;

        .energy-min-main-middle-line-cmp {
          height: 300px;
          width: 100%;

          .energy-min-main-middle-info {
            display: flex;
            height: 70px;
            background: rgba(15,45,75,0.2);
            border: 1px solid rgba(255,255,255,0.08);
            margin: 0px 100px;
            align-items: center;
            flex-wrap: wrap;

            div {
              margin: 0 10px;
            }
          }
        }


      }

      .energy-min-main-right {
        width: 400px;
        height: 100%;
        display: flex;
        flex-direction: column;

        .energy-min-main-right-item {
          margin-top: 15px;
          flex: 1;
          background: rgba(15,47,92,0.2);
        }
      }
    }
   }
</style>